import { ref, computed, onMounted, nextTick } from 'vue'
import { defineStore } from 'pinia'
import { useRouter } from 'vue-router'
import pinyin from 'pinyin'
import { ElMessage } from 'element-plus'
export const useSearchHistory = defineStore('searchHistory', () => {
    const router = useRouter() // 获取路由实例
    const searchQuery = ref(''); // 搜索输入框的响应式查询
    const searchHistory = ref([]); // 存储搜索历史记录
    const placeholderText = ref('可口可乐'); // 初始 placeholder
    const placeholderIndex = ref(0);// 初始 placeholder 索引
    const placeholderOptions = [['新鲜水果', '智能电视', '可口美食', '精选家居', '廉价平板'],
    ['运动鞋', '跑步机', '健身器材', '瑜伽垫', '运动服饰'],
    ['最新手机', '耳机', '智能手表', '平板电脑', '笔记本电脑'],
    ['家用电器', '厨房用品', '卧室家具', '客厅装饰', '洗衣机'],
    ['护肤品', '化妆品', '香水', '美容工具', '美发产品']]; // 可选的 placeholder 内容
    //获取当前日期
    const currentDate = new Date();
    //获取当年的第几天
    const dayOfYear = Math.floor((currentDate - new Date(currentDate.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24));
    // 计算索引并选取相应的placeholderOptions
    const index = dayOfYear % placeholderOptions.length;
    const placeholderArray = placeholderOptions[index];
    //搜索建议
    const suggestions = ref([]);
    // 分类关键词
    const categoryKeywords = {
        home: [
            '居家', '生活用品', '居家生活用品', '收纳', '宠物', '宠物食品',
            '艺术', '艺术藏品', '宠物用品', '家庭医疗', '医疗', '中医保健', '保健'
        ],
        food: [
            '美食', '烹饪', '餐饮', '酒水', '零食', '糕点', '甜品', '饮料',
            '茶叶', '咖啡', '早餐', '面包', '饼干', '蛋糕', '面条', '粮油',
            '米面', '方便面', '面粉', '粗粮', '豆制品'
        ],
        clothing: [
            '服饰', '男装', '女装', '内衣', '鞋包', '箱包', '配饰', '眼镜',
            '运动器材', '健身', '瑜伽', '舞蹈'
        ],
        baby: [
            '母婴', '孕产', '育儿', '婴幼儿', '儿童', '玩具', '童装', '婴儿用品',
            '奶粉', '辅食', '营养', '早教', '孕期', '哺乳'
        ],
        personal: [
            '个护', '美容', '护肤', '彩妆', '纸品', '香水', '卫生', '个人护理',
            '洗护', '口腔护理', '按摩', '美甲', 'SPA', '瘦身', '减肥', '塑身',
            '瘦腰', '美容'
        ],
        jingxuan: [
            '严选', '精选', '特惠', '新品', '热销', '折扣', '包邮', '满减',
            '限时', '团购', '优惠券', '超值'
        ],
        digital: [
            '数码', '手机', '电脑', '办公', '家电', '摄影', '影音', '电子产品',
            '电视', '路由器', '电脑配件', '笔记本', '平板电脑', '游戏机', '平板',
            '电视盒', '耳机', '电脑软件', '电脑硬件', '电脑办公'
        ],
        sport: [
            '运动', '户外', '健身', '瑜伽', '舞蹈', '跑步', '篮球', '足球',
            '乒乓球', '网球', '滑雪', '登山', '徒步', '冰雪', '滑冰', '溜冰',
            '冲浪', '滑板'
        ],
        other: [
            '杂项', '家居', '家具', '家装', '厨具', '生活', '日用', '清洁',
            '纸品', '文具', '礼品', '其他', '其他类目', '其他类别'
        ]
    };
    //同义词
    const synonymDictionary = {
        home: ['居家', '生活用品', '家居', '居住', '家用'],
        food: ['美食', '餐饮', '食物', '菜品', '饮食'],
        clothing: ['服饰', '衣物', '穿着', '服装'],
        baby: ['母婴', '儿童', '婴儿', '宝贝', '小孩'],
        personal: ['个护', '美容', '护肤', '个人护理', '身体护理'],
        jingxuan: ['精选', '推荐', '优选', '热销'],
        digital: ['数码', '电子产品', '科技产品', '电子设备'],
        sport: ['运动', '健身', '体育', '户外活动'],
        other: ['杂项', '其他', '多种类']
    };
    const showHistory = ref(false); // 控制历史记录显示的状态
    const showSuggestions = ref(false); // 控制建议显示的状态
    const activeIndex = ref(-1); // 初始为-1，表示没有选中项
    // 新增：导航建议项的方法
    const navigateSuggestions = (direction) => {
        const suggestionElements = document.querySelectorAll('.suggestion-item'); // 假设每个建议项都有这个类名
        if (direction === 1) {
            //向下
            if (activeIndex.value < suggestions.value.length - 1) {
                activeIndex.value++
            } else {
                // 如果到达最后一项，重置到第一项
                activeIndex.value = 0;
            }
        } else if (direction === -1) {
            //向上
            if (activeIndex.value > 0) {
                activeIndex.value--
            } else {
                // 如果到达第一项，重置到最后一项
                activeIndex.value = suggestions.value.length - 1;
            }
        }
        // 让视角滚动到当前选中项
        if (suggestionElements[activeIndex.value]) {
            suggestionElements[activeIndex.value].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
        }
    }
    // 更新搜索历史记录
    const updateSearchHistory = () => {
        setInterval(() => {
            //更新索引
            placeholderIndex.value = (placeholderIndex.value + 1) % placeholderArray.length
            //更新placeholderText
            placeholderText.value = placeholderArray[placeholderIndex.value]
        }, 5000);
    }
    // 更新搜索历史记录
    const startPlaceholderChange = () => {
        setInterval(() => {
            //更新索引
            placeholderIndex.value = (placeholderIndex.value + 1) % placeholderOptions.length
            //更新placeholderText
            placeholderText.value = placeholderOptions[placeholderIndex.value]
        }, 5000);
    }
    // 删除搜索历史记录
    const handleDelete = (index) => {
        searchHistory.value.splice(index, 1)// 从历史记录中移除指定项
        searchQuery.value = ''// 清空搜索框内容
    }
    //搜索功能=>当enter键按下时触发
    const handleSearch = () => {
        //判断当前的placeholder值，可以直接搜索
        if (placeholderText.value && !searchQuery.value) {
            searchQuery.value = placeholderText.value
        }
        //定义query参数
        const query = searchQuery.value.trim().toLowerCase()

        const getKeywordCategory = (query) => {
            //使用集合避免重复分类
            const categories = new Set();
            // 确保查询不为空
            if (!query) {
                return [...categories];
            }
            // 在外部设置一个标志，来判断是否有任何有效的类别被添加
            let hasValidCategory = false;
            for (const [category, keywords] of Object.entries(categoryKeywords)) {
                // 将当前关键词与同义词进行匹配
                const allKeywords = [...keywords, ...synonymDictionary[category]]

                const matched = allKeywords.some(keyword => query.includes(keyword.toLowerCase()))

                if (matched) {
                    categories.add(category);
                    hasValidCategory = true;
                }
            }
            if (!hasValidCategory) {
                categories.add('other');
            }
            return [...categories];// 返回分类列表
        };

        if (query) {
            try {
                // 存储搜索历史记录
                if (!searchHistory.value.includes(query)) {
                    searchHistory.value.unshift(query);// 新增搜索记录到最前面
                    if (searchHistory.value.length > 10) {
                        searchHistory.value.pop()// 最多存储10条搜索记录
                    }
                }

                const foundCategory = getKeywordCategory(query);

                if (foundCategory) {
                    const categoryRoutes = {
                        home: '/category/1005000',
                        food: '/category/1005002',
                        clothing: '/category/1010000',
                        baby: '/category/1011000',
                        personal: '/category/1013001',
                        jingxuan: '/category/1019000',
                        digital: '/category/1043000',
                        sport: '/category/109243029',
                        other: '/category/19999999'
                    };
                    // 假设 foundCategory 是一个数组
                    const validCategories = foundCategory.filter(category => categoryRoutes[category]);
                    // 确保 router 存在并且 foundCategory 是有效的
                    if (router && validCategories.length > 0) {
                        const selectedCategory  = validCategories[0];
                        router.push(categoryRoutes[selectedCategory]);
                    } else {
                       ElMessage.error('无法进行路由跳转，router 或分类无效');
                    }
                }
            } catch (error) {
                console.error("处理搜索时发生错误:", error);
            }
        }
        // 重置 activeIndex 到第一项
        nextTick(() => {
            activeIndex.value = -1;
        })
        //搜索完成后取消建议列表显示
        showSuggestions.value = false; // 隐藏建议列表
        // searchQuery.value = []// 清空建议列表
    }
    // 加载搜索历史记录
    const loadFromHistory = (history) => {
        searchQuery.value = history
        handleSearch()
    }
    //搜索建议
    const updateSuggestions = () => {
        const getAutocompleteSuggestions = (input) => {
            const allKeywords = Object.values(categoryKeywords).flat();// 所有关键词
            const matchedKeywords = allKeywords.filter(keyword => {
                //匹配汉字
                if (keyword.toLowerCase().includes(input.toLowerCase())) {
                    return true;
                }
                //匹配拼音
                const keywordPinyin = pinyin(keyword, { style: pinyin.STYLE_NORMAL, heteronym: true }).flat().join('');// 转为拼音
                if (keywordPinyin.includes(input.toLowerCase())) {
                    return true;
                }
                //匹配拼音首字母
                const keywordPinyinInitials = pinyin(keyword, { style: pinyin.STYLE_FIRST_LETTER, heteronym: true }).flat().join('');
                return keywordPinyinInitials.includes(input.toLowerCase());
            })
            return matchedKeywords;
        }
        //输入框为空的时候，默认不显示
        if (searchQuery.value.trim() === '') {
            suggestions.value = []// 清空建议列表
            showSuggestions.value = false; // 隐藏建议列表
        } else {
            //显示建议列表
            suggestions.value = getAutocompleteSuggestions(searchQuery.value)
            // 根据建议长度决定是否显示
            showSuggestions.value = suggestions.value.length > 0; // 根据建议长度决定是否显示
        }
        suggestions.value = getAutocompleteSuggestions(searchQuery.value)
    }
    // 选择建议
    const selectSuggestion = (suggestion, event) => {
        // 阻止事件冒泡，防止影响到点击搜索按钮的逻辑
        searchQuery.value = suggestion// 选择建议后更新搜索框内容
        suggestions.value = []
        showSuggestions.value = false; // 选择后隐藏建议
    }
    // 失去焦点时逻辑（可以加入延时处理以避免点击建议时建议被立刻隐藏）
    const hideSuggestions = () => {
        setTimeout(() => {
            showSuggestions.value = false; // 失去焦点后隐藏建议
        }, 100)
    }
    //input keyup.enter 事件
    const handleSearchOnEnter = (event) => {
          // 检查是否有建议被选中，如果有，则使用该建议进行搜索，否则使用输入框中的内容
          const searchQuery = searchHistory.suggestions?.[searchHistory.activeIndex] || searchHistory.searchQuery;
          handleSearch(searchQuery);
    }
    onMounted(() => {
        startPlaceholderChange(),
            updateSearchHistory()
    })
    return {
        searchHistory,
        handleDelete,
        placeholderText,
        searchQuery,
        handleSearch,
        loadFromHistory,
        suggestions,
        updateSuggestions,
        selectSuggestion,
        showSuggestions,
        hideSuggestions,
        showHistory,
        navigateSuggestions,
        activeIndex,
        handleSearchOnEnter
    }
}, {
    persist: true
})
